import React, { useContext } from 'react';
import classNames from 'classnames';
import { MenuContext } from './menu.tsx';

export interface MenuItemProps {
    /** 菜单项的索引值 */
    index?: number;
    /** 菜单项的禁用状态 */
    disabled?: boolean;
    /** 菜单项的子元素 */
    children?: React.ReactNode;
    className?: string;
    style?: React.CSSProperties;
}


const MenuItem = (props: MenuItemProps) => {
    const { index, disabled, children, className, style } = props;
    const context = useContext(MenuContext);

    const classes = classNames('menu-item', className, {
        'is-disabled': disabled,
        'is-active': context.index === index,
    })

    const handleClick = () => {
        if (context.onSelect && !disabled && typeof index === 'number') {
            context.onSelect(index);
        }
    }

    return (
        <li className={classes} style={style} onClick={handleClick}>
            {children}
        </li>
    )
}

MenuItem.displayName = 'MenuItem';

export default MenuItem;